/**
* @file  Graph
* @date 2024-02-19
*/
import * as d3 from "d3";
// import Svg from "./Svg";
import AnimatedCircle from "../components/AnimatedCircle";
// import Axis from "../components/Axis";
import Letters from "../components/Letters";
const width = 200
const height = 200


const Graph = () => {
  var nodes = [{ index: 0, x: 1, y: 1, name: "桂林" }, { index: 1, x: 2, y: 10, name: "广州" },
  { index: 2, x: 8, y: 12, name: "厦门" }, { index: 3, x: 15, y: 20, name: "杭州" },
  { index: 4, x: 19, y: 31, name: "上海" }, { index: 5, x: 25, y: 50, name: "青岛" },
  { index: 6, x: 21, y: 41, name: "天津" }
  ];

  var edges = [{ source: 0, target: 1 }, { source: 0, target: 2 },
  { source: 0, target: 3 }, { source: 1, target: 4 },
  { source: 1, target: 5 }, { source: 1, target: 6 }];

  const center = d3.forceCenter(width / 2, height / 2);
  d3.select('div')
    .append('svg')
    .attr('width', 500)
    .attr('height', 500)
    .style('background-color', 'pink')

  const simulation = d3.forceSimulation(nodes).force("charge", d3.forceManyBody())
    .force("link", d3.forceLink(edges))
    .force("center", center);

    console.log('simulation', simulation);
    

  return <div id="graph">Graph
    {/* <Svg></Svg> */}
    <AnimatedCircle></AnimatedCircle>
    {/* <Axis></Axis> */}
    <Letters></Letters>
  </div>
};

export default Graph;
